<template>
	<view class="order-page">
		<!-- 顶部栏 -->
		<view class="order-header">
			<text class="back-arrow" @click="goBack" @tap="goBack">＜</text>
			<text class="order-title">我的订单</text>
			<view class="order-actions">
				<text class="dot">•••</text>
				<text class="camera-icon">◎</text>
			</view>
		</view>
		<!-- 状态切换栏 -->
		<view class="order-tabs">
			<view
				v-for="(tab, idx) in tabs"
				:key="tab.value"
				:class="['order-tab', currentTab === tab.value ? 'active' : '']"
				@click="currentTab = tab.value"
				@tap="currentTab = tab.value"
			>
				{{ tab.label }}
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list">
			<view
				v-for="(order, idx) in filteredOrders"
				:key="order.id + idx"
				class="order-card"
			>
				<view class="order-card-header">
					<text class="order-no">订单编号:{{ order.id }}</text>
					<text class="order-arrow">＞</text>
				</view>
				<view class="order-divider"></view>
				<view class="order-info-row">
					<text>服务项目：{{ order.service }}</text>
				</view>
				<view class="order-info-row">
					<text>服务门店：{{ order.shop }}</text>
					<text class="order-shop-icon">✈️</text>
					<text
						v-if="order.status !== 'cancelled' && order.status !== 'refunded' && order.status !== 'completed'"
						:class="['order-status', statusColor(order.status)]"
					>
						{{ statusText(order.status) }}
					</text>
					<text
						v-else
						class="order-status-grey"
					>
						{{ statusText(order.status) }}
					</text>
				</view>
				<view class="order-info-row">
					<text>下单时间：{{ order.time }}</text>
				</view>
				<view class="order-divider"></view>
				<view class="order-bottom-row">
					<text class="order-amount">{{ order.status === 'pending' ? '应付：' : '实付：' }}<text class="order-amount-red">{{ order.amount }}元</text></text>
					<view class="order-btns">
						<!-- 按钮根据状态显示 -->
						<template v-if="order.status === 'toUse'">
							<button class="order-btn-grey" disabled>申请退款</button>
							<button class="order-btn-blue">扫码结算</button>
						</template>
						<template v-else-if="order.status === 'pending'">
							<button class="order-btn-grey" disabled>取消订单</button>
							<button class="order-btn-blue">立即支付</button>
						</template>
						<template v-else-if="order.status === 'toComment'">
							<button class="order-btn-grey" disabled>立即评价</button>
							<button class="order-btn-blue">再来一单</button>
						</template>
						<template v-else-if="order.status === 'completed'">
							<button class="order-btn-blue">再来一单</button>
						</template>
						<template v-else-if="order.status === 'cancelled'">
							<button class="order-btn-blue">重新下单</button>
						</template>
						<template v-else-if="order.status === 'refunded'">
							<button class="order-btn-blue">再来一单</button>
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const tabs = [
	{ label: '全部', value: 'all' },
	{ label: '待支付', value: 'pending' },
	{ label: '待使用', value: 'toUse' },
	{ label: '待评价', value: 'toComment' },
];
const currentTab = ref('all');

// H5端参数获取
onMounted(() => {
	// #ifdef H5
	let type = 'all';
	// 先从 search 取
	const urlParams = new URLSearchParams(window.location.search);
	if (urlParams.get('type')) {
		type = urlParams.get('type');
	} else if (window.location.hash) {
		// 再从 hash 取
		const hash = window.location.hash;
		const match = hash.match(/[?&]type=([^&]*)/);
		if (match) {
			type = decodeURIComponent(match[1]);
		}
	}
	console.log('H5端接收到的type参数:', type);
	currentTab.value = type;
	// #endif
});

// 小程序端参数获取
onLoad((options) => {
	console.log('小程序端接收到的options:', options);
	if (options && options.type) {
		currentTab.value = options.type;
	}
});

// 示例订单数据
const orders = ref([
	{
		id: '242552525222',
		service: '车辆保养',
		shop: '大宝车辆维修店',
		time: '2023-03-12 12:09',
		amount: '230.56',
		status: 'toUse', // 待使用
	},
	{
		id: '242552525222',
		service: '车辆保养',
		shop: '大宝车辆维修店',
		time: '2023-03-12 12:09',
		amount: '230.56',
		status: 'pending', // 待支付
	},
	{
		id: '242552525222',
		service: '车辆保养',
		shop: '大宝车辆维修店',
		time: '2023-03-12 12:09',
		amount: '230.56',
		status: 'toComment', // 待评价
	},
	{
		id: '242552525222',
		service: '车辆保养',
		shop: '大宝车辆维修店',
		time: '2023-03-12 12:09',
		amount: '230.56',
		status: 'completed', // 已完成
	},
	{
		id: '242552525222',
		service: '车辆保养',
		shop: '大宝车辆维修店',
		time: '2023-03-12 12:09',
		amount: '230.56',
		status: 'cancelled', // 已取消
	},
	{
		id: '242552525222',
		service: '车辆保养',
		shop: '大宝车辆维修店',
		time: '2023-03-12 12:09',
		amount: '230.56',
		status: 'refunded', // 已退款
	},
]);

const filteredOrders = computed(() => {
	if (currentTab.value === 'all') return orders.value;
	return orders.value.filter((o) => o.status === currentTab.value);
});

function statusText(status) {
	switch (status) {
		case 'pending': return '待支付';
		case 'toUse': return '待使用';
		case 'toComment': return '待评价';
		case 'completed': return '已完成';
		case 'cancelled': return '已取消';
		case 'refunded': return '已退款';
		default: return '';
	}
}
function statusColor(status) {
	switch (status) {
		case 'pending': return 'order-status-blue';
		case 'toUse': return 'order-status-blue';
		case 'toComment': return 'order-status-blue';
		default: return '';
	}
}
function goBack() {
	uni.navigateBack({
		delta: 1,
		fail: () => {
			uni.switchTab({ url: '/pages/index/index' });
		},
	});
}
</script>

<style>
.order-page {
	background: #f8f8f8;
	min-height: 100vh;
}
.order-header {
	background: linear-gradient(135deg, #2d8cf0 60%, #5bc0eb 100%);
	padding-bottom: 30rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.back-arrow {
	position: absolute;
	left: 30rpx;
	top: 60rpx;
	color: #fff;
	font-size: 40rpx;
}
.order-title {
	color: #fff;
	font-size: 36rpx;
	font-weight: bold;
	margin-top: 60rpx;
}
.order-actions {
	position: absolute;
	right: 30rpx;
	top: 60rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	color: #fff;
}
.order-tabs {
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: #fff;
	border-radius: 0 0 30rpx 30rpx;
	margin: 0 0 20rpx 0;
	box-shadow: 0 2rpx 8rpx #eee;
}
.order-tab {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	color: #2d8cf0;
	padding: 30rpx 0 20rpx 0;
	position: relative;
}
.order-tab.active {
	font-weight: bold;
	color: #2d8cf0;
}
.order-tab.active::after {
	content: '';
	display: block;
	width: 60rpx;
	height: 6rpx;
	background: #2d8cf0;
	border-radius: 3rpx;
	margin: 0 auto;
	margin-top: 10rpx;
}
.order-list {
	padding: 0 20rpx 40rpx 20rpx;
}
.order-card {
	background: #fff;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 8rpx #eee;
	padding: 30rpx 24rpx 24rpx 24rpx;
}
.order-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28rpx;
	font-weight: bold;
}
.order-no {
	color: #222;
}
.order-arrow {
	color: #bbb;
	font-size: 36rpx;
}
.order-divider {
	height: 2rpx;
	background: #f3f3f3;
	margin: 18rpx 0;
}
.order-info-row {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #222;
	margin-bottom: 6rpx;
}
.order-shop-icon {
	margin-left: 8rpx;
	color: #2d8cf0;
	font-size: 28rpx;
}
.order-status {
	margin-left: 16rpx;
	font-size: 28rpx;
	font-weight: bold;
}
.order-status-blue {
	color: #2d8cf0;
}
.order-status-grey {
	color: #bbb;
	margin-left: 16rpx;
	font-size: 28rpx;
	font-weight: bold;
}
.order-bottom-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 18rpx;
}
.order-amount {
	font-size: 28rpx;
	color: #222;
}
.order-amount-red {
	color: #ff4d00;
	font-weight: bold;
	margin-left: 4rpx;
}
.order-btns {
	display: flex;
	gap: 16rpx;
}
.order-btn-blue {
	background: #2d8cf0;
	color: #fff;
	border: none;
	border-radius: 16rpx;
	padding: 12rpx 32rpx;
	font-size: 28rpx;
}
.order-btn-grey {
	background: #eee;
	color: #bbb;
	border: none;
	border-radius: 16rpx;
	padding: 12rpx 32rpx;
	font-size: 28rpx;
}
</style>
